<template>
  <div class="container">
    <el-row style="height: 100%">
      <el-col :span="5" style="height: 100%">
        <edit-tree
          class="left"
          ref="tree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          @handleClickTree="handleClickTree"
        />
      </el-col>
      <el-col :span="19" class="list">
        <div class="right">
          <list-table-new v-bind="tableConfig" ref="listTable"></list-table-new>
        </div>
      </el-col>
    </el-row>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <editForm
        :formConfig="formConfig"
        ref="editForm"
        :formData="editFormData"
      ></editForm>
    </dialogPublic>
  </div>
</template>

<script>
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
import {
  queryOrgList,
  addCharacter,
  editCharacter,
  deleteCharacter,
} from "@/api/systemManagement/authManagement.js";
export default {
  data() {
    return {
      show: false,
      title: "",
      selectNode: {
        id: "",
        name: "",
      },
      treeSetting: {
        btnArr: ["add"],
        title: "应用",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      tableConfig: {
        showAllSearch: false,
        showIndex: true,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, that) => {
            this.getTableData(params);
          },
          searchArr: [
            // {
            //   type: "input",
            //   label: "用户名称",
            //   model: "name",
            //   placeholder: "请输入",
            // },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [
          {
            name: "新增",
            icon: "el-icon-plus",
            method: () => {
              this.addRole();
            },
          },
          {
            name: "删除",
            icon: "el-icon-delete",
            method: (index, row) => {
              this.deleteRole(row);
            },
          },
        ],
        column: [
          {
            label: "角色名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "角色类型",
            textAlign: "center",
            prop: "roleType",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "system_role_type",
                row.roleType
              );
            },
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.editRole(row);
                },
              },
              {
                text: "分配权限",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  //this.show = true;
                  this.goDetailPage(row, "/authAssignment");
                },
              },
            ],
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "角色名称",
            prop: "name",
            type: "text",
            required: true,
            span: 12,
          },
          {
            label: "所属应用",
            prop: "appid",
            type: "select",
            span: 12,
            required: true,
            selectOption: [],
          },
          {
            label: "角色类型",
            prop: "roleType",
            type: "select",
            span: 12,
            required: true,
            selectOption: this.$store.getters.dirtData("system_role_type"),
          },
          {
            label: "排序号",
            prop: "sort",
            type: "number",
            span: 12,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    handleClickTree(node) {
      this.selectNode.id = node.id;
      this.selectNode.name = node.name;
      this.getTableData();
    },
    //跳转到详情页
    goDetailPage(row, router) {
      const { href } = this.$router.resolve({
        path: router,
        query: {
          id: row ? row.id : "",
          name: row ? row.name : "",
        },
      });
      window.open(href, "_blank");
    },
    //新建菜单
    addRole() {
      this.show = true;
      this.title = "新增角色";
      this.editFormData = {};
    },
    //编辑菜单
    editRole(row) {
      this.show = true;
      this.title = "编辑角色";
      this.editFormData = row;
    },
    //删除角色
    deleteRole() {
      let arr = this.$refs.listTable.getSelectData();
      let ids = [];
      if (arr.length != 0) {
        this.$confirm("确定要删除选中数据吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            arr.forEach((item) => {
              ids.push(item.id);
            });
            deleteCharacter({ ids: ids.join() }).then(
              (res) => {
                if (res.code == 200) {
                  this.$message.success(res.description);
                  this.getTableData();
                }
              },
              (error) => {
                this.$message.error(res.description);
              }
            );
          })
          .catch((e) => {});
      } else {
        this.$message.warning("请至少勾选一条数据");
      }
    },
    //新增或修改角色
    async doSubmit() {
      const params = await this.$refs.editForm.getFormData();
      if (this.title == "新增角色") {
        let res = await addCharacter(params);
        if (res.code == 200) {
          this.$message.success(res.description);
          this.show = false;
        } else {
          this.$message.error(res.description);
        }
      } else {
        let res = await editCharacter(params);
        if (res.code == 200) {
          this.$message.success(res.description);
          this.show = false;
        } else {
          this.$message.error(res.description);
        }
      }
      this.getTableData();
    },
    //获取表格数据
    getTableData(params) {
      let queryData = Object.assign({}, params);
      queryData.appid = this.selectNode.id;
      queryOrgList(queryData).then(
        (res) => {
          if (res.code) {
            this.$set(this.tableConfig, "tableData", res.data);
            this.$set(this.tableConfig, "totalNumber", res.total);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取组织树数据
    getTreeData() {
      //得到组织树的数据
      applicationQueryList().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            this.$refs.tree.setTreeData(res.data);
            if (res.data.length != 0) {
              this.selectNode.id = res.data[0].id;
              this.selectNode.name = res.data[0].name;
              let arr = res.data.map((item) => {
                const obj = {
                  label: item.name,
                  value: item.id,
                };
                return obj;
              });
              this.$set(this.formConfig.itemArr[1], "selectOption", arr);
              //this.getTableData();
              this.$refs.listTable.handleCurrentChange(1);
            }
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .list {
    height: 100%;
    padding: 20px;
    border-left: 10px solid #f2f3f8;
  }
  .right {
    width: 100%;
    height: calc(100% - 20px);
  }
}
</style>
